<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:composite="http://java.sun.com/jsf/composite"
	xmlns:sec="http://www.springframework.org/security/tags"
	xmlns:p="http://primefaces.prime.com.tr/ui">
<composite:interface>
	<composite:attribute name="searchTitle" />
	<composite:attribute name="searchButtonName" />
</composite:interface>
<composite:implementation>
	<h:form prependId="false">
		<fieldset><legend
			style="font-size: 20px; font-weight: bold">#{cc.attrs.searchTitle}</legend>
		<sec:authorize ifNotGranted="ROLE_SUPERVISOR">
			<div class="error">You have to login as admin to use Search
			Function</div>
		</sec:authorize> <sec:authorize ifAnyGranted="ROLE_SUPERVISOR">
			<p>Please input the "username" to search (or just click search if
			you want to view all list) :</p>
			<h:panelGrid columns="2">
				<h:outputLabel value="User Name:" for="search_field"></h:outputLabel>
				<h:inputText id="search_field" value="#{searchBean.searchText}"
					required="true" />

				<p:commandButton value="Search User" action="search" update="output" />
				<p>Search "username" should be "quachvu" or "tuedang"</p>
				<p:ajaxStatus style="width:16px;height:16px;">
					<f:facet name="start">
						<h:graphicImage library="images" name="ajaxloading.gif" />
					</f:facet>
					<f:facet name="complete">
						<h:outputText value="" />
					</f:facet>
				</p:ajaxStatus>
			</h:panelGrid>
			<p:dataTable id="output" value="#{user}" var="user">
				<p:column>
					<f:facet name="header">
						<h:outputText value="User Name" />
					</f:facet>
					<h:outputText value="#{user.username}" />
				</p:column>
				<p:column>
					<f:facet name="header">
						<h:outputText value="First Name" />
					</f:facet>
					<h:outputText value="#{user.firstname}" />
				</p:column>
				<p:column>
					<f:facet name="header">
						<h:outputText value="Last Name" />
					</f:facet>
					<h:outputText value="#{user.lastname}" />
				</p:column>
			</p:dataTable>
			<sec:authorize ifAllGranted="ROLE_SUPERVISOR">
				<p:commandButton oncomplete="dlg3.show();" value="ViewDetail"
					update="display" actionListener="search" ajax="true"></p:commandButton>
			</sec:authorize>
			<!--				<h:outputLink value="javascript:void(0)" onclick="dlg3.show()" update=":display" action="search">Show</h:outputLink>-->
			<p:outputPanel id="display" style="display:block;margin-top:10px;">
				<p:dialog header="User Detail" widgetVar="dlg3" height="200"
					width="500">
					<p:dataTable value="#{user}" var="user">
						<p:column>
							<f:facet name="header">
								<h:outputText value="User Name" />
							</f:facet>
							<h:outputText value="#{user.username}" />
						</p:column>
						<p:column>
							<f:facet name="header">
								<h:outputText value="First Name" />
							</f:facet>
							<h:outputText value="#{user.firstname}" />
						</p:column>
						<p:column>
							<f:facet name="header">
								<h:outputText value="Last Name" />
							</f:facet>
							<h:outputText value="#{user.lastname}" />
						</p:column>

						<p:column>
							<f:facet name="header">
								<h:outputText value="Age" />
							</f:facet>
							<h:outputText value="#{user.age}" />
						</p:column>
						<p:column>
							<f:facet name="header">
								<h:outputText value="Description" />
							</f:facet>
							<h:outputText value="#{user.desc}" />
						</p:column>

					</p:dataTable>
				</p:dialog>
			</p:outputPanel>
		</sec:authorize></fieldset>

	</h:form>
</composite:implementation>
</html>